<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/bootstrap.min.js"></script>
    <script src="../assets/js/DatePicker.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
    <link rel="stylesheet" href="../assets/css/style.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
        function deleteGoods(id) {
            location.href = "${pageContext.request.contextPath}/goodsDeleteById?id=" + id;
        }

        $(function () {
            $("#datepicker").datepicker({
                //inline:true,
                changeMonth: true, //在日期的标题栏中是否出现下拉选择框，选择日期中的月份。true代表有选择框，false代表无选择框
                changeYear: false, //在日期的标题栏中是否出现下拉选择框，选择日期中的年份。true代表有选择框，false代表无选择框
                showButtonPanel: true,  //在日期面板的下方出现两个按钮，一个是今天，一个是关闭。默认值是false,不显示的
                closeText: "关闭",  //必须结合showButtonPanel使用，并且showButtonPanel的值必须是true，否则看不到效果
                dateFormat: "yy-mm-dd",  //表示日期显示的格式
                defaultDate: -3,  //缺省值在当前日期中加或减几天
                showAnim: "toggle",  //日期界面出现的动画效果
                showWeek: true,    //显示周  当前中的第几周
                firstDay: 1,   //默认firstDay 当前的第一天
                yearRange: "1970:2021",   //表示下拉框中年份的范围
                onSelect: function (selectedDate) {
                    //alert(selectedDate);
                    //获取当前对象this.id=dp minDate  //开始日期的最小值
                    //获取 option的值是minDat或者是maxDate  根据dom对象的
                    var option = this.id == "dp" ? "minDate" : "maxDate",
                        //获取当前日期的实例对象，每遍历一次就获取一次
                        instance = $(this).data("datepicker"),
                        //获取日期   instance.settings 获取日期的值
                        date = $.datepicker.parseDate(
                            instance.settings.dateFormat ||
                            $.datepicker._defaults.dateFormat,
                            selectedDate, instance.settings);
                    //设置日期
                    dates.not(this).datepicker("option", option, date);
                }
            });
        });
    </script>
    <title>商品列表</title>
</head>
<body>
<div class="row" style="width:98%;margin-left: 1%;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                商品列表
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>商品名称</span>
                            <input type="text" name="name" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>上架时间</span>
                            <input type="text" id="datepicker" name="pubdate" class="form-control"/>
                            <!--<input type="text" readonly="readonly" name="pubdate" class="form-control"
                                   onclick="setday(this)">-->
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-primary" id="search" onclick="search()"><span
                                    class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
                <div style="height: 400px;overflow: scroll;">
                    <table id="tb_list" class="table table-striped table-hover table-bordered">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    function ondelete(id) {
        console.log(id)
        $.ajax({
            url: "http://localhost:80/phalapi/public/index.php?s=App.Goods.DeleteGoodsInfo",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify({
                "good_id": id
            }),
            dataType: "JSON",
            success: function (result) {
                alert('删除成功');
                window.location.replace("showGoods.php");
            },
            error: function (msg) {
                alert("错误信息：" + msg);
            }
        })
    }

    function onupdate(id) {
        // console.log(id)
        window.location.replace("updateGoods.php?id=" + id);

    }

    function inits() {
        var s = "<tr class='tr_head'><td>序号</td><td>商品名称</td><td>价格</td><td>图片</td><td>上架时间</td><td>类型</td><td>操作</td></tr>";
        return s
    }

    function adds(s, z, a, b, price_url, d, e, id) {
        s += "<tr><td>" + z + "</td><td>" + a + "</td><td>" + b + "</td><td><img src='" + price_url + "' width='30' height='30' /></td><td>" + d + "</td><td>" + e + "</td><td><button class='btn btn-primary' onclick='ondelete(" + id + ")' style='margin-right: 10px'>删除</button><button class='btn btn-primary' onclick='onupdate(" + id + ")'>修改</button></td></tr>";
        return s
    }

    //查询全部商品
    $(function () {
        $.ajax({
            url: "http://localhost:80/phalapi/public/index.php?s=App.Goods.getGoodsInfo",
            type: "GET",
            dataType: "JSON",
            success: function (result) {
                var user_data = result.data.info;
                var z = 1;
                console.log("data:" + user_data[0]['id'])
                var pri_url = "../assets/fmwimages/";
                var s = inits();
                for (var i = 0; i < user_data.length; i++) {
                    var id = user_data[i]['id'];
                    var a = user_data[i]['name'];
                    var b = user_data[i]['price'];
                    var c = user_data[i]['picture'];
                    var d = user_data[i]['pubdate'];
                    var e = user_data[i]['typeName'];
                    var price_url = pri_url + c
                    // console.log('price_url=' + price_url)
                    s = adds(s, z++, a, b, price_url, d, e, id);
                }
                $("#tb_list").html(s);
            },
            error: function (msg) {
                alert("错误信息：" + msg);
            }
        })
    })

    //搜索
    function search() {
        var searchName = $("input[name='name']").val();
        var searchDate = $("input[name='pubdate']").val();

        function likeName(date) {
            //名称模糊
            $.ajax({
                url: "http://localhost/phalapi/public/index.php?s=App.Goods.LikeQueryByGoodsName",
                data: {
                    "like_goodName": searchName,
                },
                type: "GET",
                dataType: "JSON",
                success: function (result) {
                    var user_data = result.data.info;
                    var z = 1;
                    console.log("data:" + user_data[0]['id'])
                    var pri_url = "../assets/fmwimages/";
                    var s = inits();
                    for (var i = 0; i < user_data.length; i++) {
                        var id = user_data[i]['id'];
                        var a = user_data[i]['name'];
                        var b = user_data[i]['price'];
                        var c = user_data[i]['picture'];
                        var d = user_data[i]['pubdate'];
                        var e = user_data[i]['typeName'];
                        var price_url = pri_url + c
                        // console.log('price_url=' + price_url)
                        if (typeof date !== "undefined") {
                            if (d == date) {
                                s = adds(s, z, a, b, price_url, d, e, id);
                            }
                        } else {
                            s = adds(s, z, a, b, price_url, d, e, id);
                        }


                    }
                    $("#tb_list").html(s);
                },
                error: function (msg) {
                    alert("错误信息：" + msg);
                }
            })
        }


        function likeDate() {
            //日期模糊
            $.ajax({
                url: "http://localhost/phalapi/public/index.php?s=App.Goods.LikeQueryByGoodsDate",
                data: {
                    "like_goodDate": searchDate,
                },
                type: "GET",
                dataType: "JSON",
                success: function (result) {
                    var user_data = result.data.info;
                    var z = 1;
                    console.log("data:" + user_data[0]['id'])
                    var pri_url = "../assets/fmwimages/";
                    var s = inits();
                    for (var i = 0; i < user_data.length; i++) {
                        var id = user_data[i]['id'];
                        var a = user_data[i]['name'];
                        var b = user_data[i]['price'];
                        var c = user_data[i]['picture'];
                        var d = user_data[i]['pubdate'];
                        var e = user_data[i]['typeName'];
                        var price_url = pri_url + c
                        // console.log('price_url=' + price_url)

                        s = adds(s, z, a, b, price_url, d, e, id);

                    }
                    $("#tb_list").html(s);
                },
                error: function (msg) {
                    alert("错误信息：" + msg);
                }
            })
        }

        //判断
        if (searchName == '') {
            if (searchDate != '') {
                likeDate()
            }
        } else if (searchDate == '') {
            if (searchName != '') {
                likeName()
            }
        } else {
            if (searchName != '' & searchDate != '') {
                likeName(searchDate)
            }
        }


    }

</script>
</body>
